<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">

    <script src="../lib/easyui/jquery.min.js"></script>
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<button class="btn btn-default" id="btn1">按钮1</button>
<label>这是一个label</label>
<button class="btn btn-default" id="btn2">按钮2</button>

<p>第一个标签</p>
<p>第二个标签</p>
<p class="pyclass" style="color:red">第三个标签</p>
<p>第四个标签</p>

<table class="table table-striped table-bordered">
    <thead>
    <th>姓名</th>
    <th>年龄</th>
    <th>地址</th>
    <th>操作</th>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>21</td>
        <td>湖南</td>
        <td><button id="btn_1" class="btn btn-primary">查看</button> </td>
    </tr>
    <tr>
        <td>张宁</td>
        <td>21</td>
        <td>湖南</td>
        <td><button id="btn_2" class="btn btn-primary">查看</button> </td>
    </tr>
    <tr>
        <td>张双</td>
        <td>21</td>
        <td>湖南</td>
        <td><button id="btn_3" class="btn btn-primary">查看</button> </td>
    </tr>
    </tbody>
</table>

<script>
//浏览器执行源码从上到下，一行行执行
//被引入的先引入
//css要求在js库之前引入

function hidebtn2(){

}

//$查找符
//ready(function(){})网页加载完，则执行回调函数。function就是回调函数
$(document).ready(function(){
 //$.messager.alert('系统提示','jquery引入成功','warning')
 $('#btn1').on('click',function(e){
    $(this).hide();//隐藏按钮
    $.messager.alert('系统提示','点击了按钮1','info')

 })
 $('.bywl').on('click',function(e){
    //show是显示节点的信息
    $('#btn1').show();
    //根据标签选择
    $.messager.alert('label的内容',$('label').text(),'info')
    $.messager.alert('系统提示','你点击了我','error',hidebtn2)

 })
 $('p.pyclass').click(function(){
    $.messager.alert('系统提示','你点击了pyclass')
 })

$('button').click(function(e){
console.log(e)
})

$('p').on('click',function(e){
//this 指的是当前的触发节点
$(this).hide()
})

$('button[id^="btn_"]').on('click',function(){
    var idno=$(this).attr('id')
    console.log(idno)
    idno=idno.slice(4)
    //根据id查询数据库
    var msg='查到了数据 id='+idno+'内容是。。。'
    $.messager.alert('',msg)

})
})


/*
    $(function(){
    $.messager.alert('系统提示','jquery引入成功','warning')
    })*/
</script>

</form>
</body>
</html>